<template>
  <div class="item">
    <div class="label">{{ getProductDiscount(cardMoneyPackItem) }}</div>
    <div class="balance"><span class="label2">余额</span> <span class="symbol">¥</span><span
      class="amount">{{
        (cardMoneyPackItem.remainAmount || 0) + (cardMoneyPackItem.remainBounsScore || 0)
      }}</span></div>
    <div class="give">（含赠金 ¥{{ cardMoneyPackItem.remainBounsScore }}）</div>
  </div>
</template>

<script setup>
import {getProductDiscount} from "../member/util.js";

const props = defineProps({
  cardMoneyPackItem: {
    type: Object,
  },
});

</script>

<style scoped>
.item {
  .label {
    font-weight: 400;
    font-size: 12px;
    color: #333333;
  }

  .label2 {
    font-weight: 400;
    font-size: 14px;
    color: #6D414C;
  }

  .symbol {
    font-weight: 500;
    font-size: 14px;
    color: #6D414C;
  }

  .amount {
    font-weight: 500;
    font-size: 20px;
    color: #6D414C;
  }

  .give {
    text-align: right;
    font-weight: 400;
    font-size: 13px;
    color: #6D414C;
  }

  .balance {
    text-align: right;
  }
}
</style>
